<template>
  <div class="register-container">
    <!-- 金铲铲风格背景纹理 -->
    <div class="background-texture"></div>
    
    <!-- 背景装饰效果 -->
    <div class="background-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
    </div>
    
    <!-- 金铲铲风格背景网格 -->
    <div class="background-grid"></div>
    
    <div class="register-wrapper">
      <!-- 游戏装饰元素 -->
      <div class="game-decoration top-left"></div>
      <div class="game-decoration top-right"></div>
      <div class="game-decoration bottom-left"></div>
      <div class="game-decoration bottom-right"></div>
      
      <!-- 品牌标识 -->
      <div class="brand-logo">
        <div class="logo-glow"></div>
        <img src="@/assets/jcc_logo.svg" alt="金铲铲之战" />
      </div>
      
      <div class="register-header">
        <h2>弈士注册</h2>
        <div class="mission-code">
          <span class="code-label">赛季:</span>
          <span class="code-value">幻灵战斗星系</span>
        </div>
        <p>新弈士，请创建你的游戏身份</p>
        <div class="divider-small"></div>
      </div>
      <form @submit.prevent="handleRegister" class="register-form">
        <div class="form-group">
          <label for="username" class="form-label">弈士昵称</label>
          <div class="input-wrapper">
            <i class="input-icon user-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
            </i>
            <input
              type="text"
              id="username"
              v-model="form.username"
              placeholder="请输入弈士昵称"
              required
              class="form-input"
              style="background: rgba(0, 0, 0, 0.3); color: #DDA0DD;"
            />
          </div>
          <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
        </div>
        <div class="form-group">
          <label for="email" class="form-label">联系方式</label>
          <div class="input-wrapper">
            <i class="input-icon email-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg>
            </i>
            <input
              type="email"
              id="email"
              v-model="form.email"
              placeholder="请输入电子邮箱"
              required
              class="form-input"
              style="background: rgba(0, 0, 0, 0.3); color: #DDA0DD;"
            />
          </div>
          <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
        </div>
        <div class="form-group">
          <label for="password" class="form-label">游戏密码</label>
          <div class="input-wrapper">
            <i class="input-icon lock-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
            </i>
            <input
              type="password"
              id="password"
              v-model="form.password"
              placeholder="请设置游戏密码（至少8位）"
              required
              class="form-input"
              style="background: rgba(0, 0, 0, 0.3); color: #DDA0DD;"
            />
          </div>
          <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
          <div class="password-strength" v-if="passwordStrength > 0">
            <div class="strength-bar">
              <div 
                class="strength-indicator"
                :class="[
                  passwordStrength === 1 ? 'weak' : '',
                  passwordStrength === 2 ? 'medium' : '',
                  passwordStrength === 3 ? 'strong' : ''
                ]"
                :style="{ width: passwordStrength * 33.3 + '%' }"
              ></div>
            </div>
            <span class="strength-text">
              {{ passwordStrength === 1 ? '弱' : passwordStrength === 2 ? '中' : '强' }}
            </span>
          </div>
        </div>
        <div class="form-group">
          <label for="confirmPassword" class="form-label">确认密码</label>
          <div class="input-wrapper">
            <i class="input-icon lock-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
            </i>
            <input
              type="password"
              id="confirmPassword"
              v-model="form.confirmPassword"
              placeholder="请再次输入密码"
              required
              class="form-input"
              style="background: rgba(0, 0, 0, 0.3); color: #DDA0DD;"
            />
          </div>
          <span v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</span>
        </div>
        <div class="form-group">
          <label class="terms-agreement">
            <div class="checkbox-wrapper">
              <input type="checkbox" v-model="form.agreeTerms" required />
              <span class="checkmark"></span>
            </div>
            <span>我已阅读并同意<a href="#" class="terms-link">游戏协议</a>和<a href="#" class="terms-link">隐私政策</a></span>
          </label>
        </div>
        
        <button type="submit" class="register-button" :disabled="isSubmitting">
          <span v-if="!isSubmitting" class="button-content">
            <span>开始游戏</span>
            <span class="button-arrow">→</span>
          </span>
          <span v-else class="loading-spinner">
            <svg class="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M12 6v6l4 2"></path>
            </svg>
            创建角色中...
          </span>
        </button>
        
        <div class="login-link">
          <span>已有角色?</span>
          <router-link to="/login" class="link">立即登录</router-link>
        </div>
      </form>
      
      <div class="divider">
        <span>快速登录</span>
      </div>
      
      <div class="social-register">
        <button class="social-button" @click="handleSocialRegister('qq')">
          <div class="social-icon-wrapper">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <span>QQ账号</span>
        </button>
        
        <button class="social-button" @click="handleSocialRegister('wechat')">
          <div class="social-icon-wrapper">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 2c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6zm0 2c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"></path>
            </svg>
          </div>
          <span>微信账号</span>
        </button>
      </div>
    </div>
    
    <!-- 二维码弹窗 -->
    <div v-if="showQrCode" class="qr-code-modal" @click="closeQrCode">
      <div class="qr-code-container" @click.stop>
        <button class="qr-code-close" @click="closeQrCode">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
        
        <div class="qr-code-header">
          <h3>{{ activeProvider === 'qq' ? 'QQ扫码登录' : '微信扫码登录' }}</h3>
          <p>请使用{{ activeProvider === 'qq' ? 'QQ' : '微信' }}扫描下方二维码</p>
        </div>
        
        <div class="qr-code-wrapper">
          <img :src="qrCodeUrl" :alt="activeProvider === 'qq' ? 'QQ登录二维码' : '微信登录二维码'" class="qr-code-image" />
          <div class="qr-code-info">
            <div class="qr-code-time">
              <span>有效期：{{ getRemainingTime() }}</span>
            </div>
            <div class="qr-code-tip">
              <span>请确认授权登录金铲铲之战</span>
            </div>
          </div>
        </div>
        
        <div class="qr-code-footer">
          <button class="refresh-qr-code" @click="handleSocialRegister(activeProvider)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
            刷新二维码
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        agreeTerms: false
      },
      errors: {},
      isSubmitting: false,
      passwordStrength: 0,
      noiseCanvas: null,
      showQrCode: false,
      activeProvider: null,
      qrCodeUrl: '',
      qrCodeExpireTime: null
    }
  },
  created() {
    // 页面加载时创建噪声背景效果
    this.createNoiseEffect()
    
    // 页面加载时添加动画
    document.body.classList.add('register-page-active')
  },
  beforeUnmount() {
    document.body.classList.remove('register-page-active')
    
    // 清理噪声背景
    if (this.noiseCanvas && this.noiseCanvas.parentNode) {
      this.noiseCanvas.parentNode.removeChild(this.noiseCanvas)
    }
  },
  watch: {
    'form.password'(newValue) {
      this.checkPasswordStrength(newValue)
    },
    'form.confirmPassword'() {
      if (this.form.confirmPassword && this.form.confirmPassword !== this.form.password) {
        this.errors.confirmPassword = '两次输入的密码不一致'
      } else {
        delete this.errors.confirmPassword
      }
    }
  },
  methods: {
    // 检查密码强度
    checkPasswordStrength(password) {
      if (!password) {
        this.passwordStrength = 0
        return
      }
      
      let strength = 0
      
      // 长度检查
      if (password.length >= 8) strength++
      
      // 包含数字
      if (/\d/.test(password)) strength++
      
      // 包含大小写字母或特殊字符
      if (/[A-Z]/.test(password) || /[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++
      
      this.passwordStrength = strength
    },
    
    // 表单验证
    validateForm() {
      const errors = {}
      
      if (!this.form.username.trim()) {
        errors.username = '战士编号不能为空'
      } else if (this.form.username.length < 3) {
        errors.username = '战士编号至少3个字符'
      }
      
      if (!this.form.email.trim()) {
        errors.email = '联络邮箱不能为空'
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
        errors.email = '请输入有效的邮箱地址'
      }
      
      if (!this.form.password) {
        errors.password = '访问密码不能为空'
      } else if (this.form.password.length < 8) {
        errors.password = '访问密码至少8个字符'
      }
      
      if (!this.form.confirmPassword) {
        errors.confirmPassword = '请确认密码'
      } else if (this.form.confirmPassword !== this.form.password) {
        errors.confirmPassword = '两次输入的密码不一致'
      }
      
      if (!this.form.agreeTerms) {
        errors.terms = '请阅读并同意战士守则和保密协议'
      }
      
      this.errors = errors
      return Object.keys(errors).length === 0
    },
    
    // 处理注册
    handleRegister() {
      if (!this.validateForm()) {
        return
      }
      
      this.isSubmitting = true
      
      // 确保使用正确的API URL格式 - 直接使用硬编码的localhost:3000，避免环境变量问题
      const apiUrl = 'http://localhost:3000/api/register';
      console.log('注册请求URL:', apiUrl);
      
      // 准备请求数据
      const requestData = {
        username: this.form.username,
        email: this.form.email,
        password: this.form.password
      };
      console.log('注册请求数据:', requestData);
      
      // 设置超时
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时
      
      // 发送注册请求
      fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(requestData),
        signal: controller.signal
      })
      .then(response => {
        clearTimeout(timeoutId);
        console.log('注册请求响应状态:', response.status);
        
        if (!response.ok) {
          // 处理HTTP错误
          return response.json().catch(() => ({
            success: false,
            message: `服务器错误: ${response.status}`
          }));
        }
        
        return response.json().catch(() => ({
          success: false,
          message: '响应格式错误'
        }));
      })
      .then(data => {
        console.log('注册请求响应数据:', data);
        this.isSubmitting = false;
        
        if (data && data.success) {
          // 注册成功，跳转到登录页面
          alert(data.message || '战士注册成功！请登录您的账户');
          this.$router.push('/login');
        } else {
          // 注册失败，显示错误信息
          alert(data?.message || '注册失败，请重试');
        }
      })
      .catch(error => {
        clearTimeout(timeoutId);
        this.isSubmitting = false;
        
        // 详细的错误处理
        let errorMessage = '无法连接到服务器，请稍后再试';
        
        if (error.name === 'AbortError') {
          errorMessage = '请求超时，请检查网络连接';
        } else if (error.message) {
          errorMessage += ` (错误: ${error.message})`;
        }
        
        console.error('注册请求失败:', error);
        alert(errorMessage);
        
        // 添加视觉反馈给用户
        const submitButton = document.querySelector('.register-button');
        if (submitButton) {
          submitButton.classList.add('error-shake');
          setTimeout(() => submitButton.classList.remove('error-shake'), 1000);
        }
      })
    },
    
    // 处理社交账号注册/登录
    handleSocialRegister(provider) {
      console.log(`使用${provider}注册/登录`)
      
      // 设置当前激活的提供者
      this.activeProvider = provider;
      
      // 生成模拟的二维码URL
      // 在实际应用中，这里应该调用后端API获取真实的授权二维码
      if (provider === 'qq') {
        this.qrCodeUrl = 'https://picsum.photos/id/237/200/200'; // 模拟QQ登录二维码
        this.qrCodeExpireTime = new Date(Date.now() + 2 * 60 * 1000); // 2分钟后过期
      } else if (provider === 'wechat') {
        this.qrCodeUrl = 'https://picsum.photos/id/238/200/200'; // 模拟微信登录二维码
        this.qrCodeExpireTime = new Date(Date.now() + 2 * 60 * 1000); // 2分钟后过期
      }
      
      // 显示二维码弹窗
      this.showQrCode = true;
      
      // 开始倒计时检查
      this.startQrCodeCheck(provider);
    },
    
    // 开始检查二维码扫描状态
    startQrCodeCheck(provider) {
      // 模拟每3秒检查一次扫描状态
      const checkInterval = setInterval(() => {
        // 检查二维码是否已过期
        if (Date.now() > this.qrCodeExpireTime.getTime()) {
          clearInterval(checkInterval);
          this.showQrCode = false;
          alert('登录二维码已过期，请重新获取');
          return;
        }
        
        // 模拟随机扫描成功
        const success = Math.random() > 0.8; // 20%概率模拟扫描成功
        
        if (success) {
          clearInterval(checkInterval);
          this.showQrCode = false;
          alert(`您已通过${provider === 'qq' ? 'QQ' : '微信'}成功登录！`);
          this.$router.push('/'); // 登录成功后跳转到首页
        }
      }, 3000);
      
      // 保存定时器引用，以便在关闭弹窗时清除
      this.qrCodeCheckInterval = checkInterval;
    },
    
    // 关闭二维码弹窗
    closeQrCode() {
      if (this.qrCodeCheckInterval) {
        clearInterval(this.qrCodeCheckInterval);
        this.qrCodeCheckInterval = null;
      }
      this.showQrCode = false;
      this.activeProvider = null;
      this.qrCodeUrl = '';
      this.qrCodeExpireTime = null;
    },
    
    // 获取剩余时间显示
    getRemainingTime() {
      if (!this.qrCodeExpireTime) return '00:00';
      
      const remainingMs = this.qrCodeExpireTime.getTime() - Date.now();
      if (remainingMs <= 0) return '00:00';
      
      const seconds = Math.floor((remainingMs / 1000) % 60);
      const minutes = Math.floor((remainingMs / (1000 * 60)) % 60);
      
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    
    createNoiseEffect() {
      // 创建噪声背景效果
      const canvas = document.createElement('canvas')
      canvas.width = 200
      canvas.height = 200
      canvas.style.position = 'fixed'
      canvas.style.top = '0'
      canvas.style.left = '0'
      canvas.style.width = '100%'
      canvas.style.height = '100%'
      canvas.style.pointerEvents = 'none'
      canvas.style.zIndex = '1'
      canvas.style.opacity = '0.03'
      
      document.body.appendChild(canvas)
      this.noiseCanvas = canvas
      
      const ctx = canvas.getContext('2d')
      const imageData = ctx.createImageData(200, 200)
      const data = imageData.data
      
      // 生成噪声
      for (let i = 0; i < data.length; i += 4) {
        const noise = Math.floor(Math.random() * 256)
        data[i] = noise // R
        data[i + 1] = noise // G
        data[i + 2] = noise // B
        data[i + 3] = 255 // A
      }
      
      ctx.putImageData(imageData, 0, 0)
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 金铲铲风格背景纹理 */
.background-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255, 215, 0, 0.1) 1px, transparent 0),
    linear-gradient(45deg, rgba(26, 16, 60, 0.9) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(26, 16, 60, 0.9) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(26, 16, 60, 0.9) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(26, 16, 60, 0.9) 75%);
  background-size: 20px 20px, 20px 20px, 20px 20px, 10px 10px, 10px 10px;
  background-position: 0 0, 0 0, 10px -10px, 10px -10px, -10px 0px;
  pointer-events: none;
  z-index: 1;
}

/* 金铲铲风格背景网格 */
.background-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 215, 0, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 215, 0, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 1;
}

.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a103c 0%, #321b6e 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 背景装饰效果 */
.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: float 20s infinite ease-in-out;
  filter: blur(20px);
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0) 70%);
  top: 40%;
  right: -150px;
  animation-delay: 5s;
}

.shape-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(147, 112, 219, 0.25) 0%, rgba(147, 112, 219, 0) 70%);
  bottom: -125px;
  left: 20%;
  animation-delay: 10s;
}

.shape-4 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
  top: 20%;
  left: 70%;
  animation-delay: 3s;
}

.shape-5 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(147, 112, 219, 0.2) 0%, rgba(147, 112, 219, 0) 70%);
  bottom: 30%;
  right: 30%;
  animation-delay: 7s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, 30px) rotate(5deg);
  }
  50% {
    transform: translate(0, 60px) rotate(0deg);
  }
  75% {
    transform: translate(-30px, 30px) rotate(-5deg);
  }
}

/* 游戏装饰元素 */
.game-decoration {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  pointer-events: none;
}

.game-decoration.top-left {
  top: 20px;
  left: 20px;
  border-right: none;
  border-bottom: none;
}

.game-decoration.top-right {
  top: 20px;
  right: 20px;
  border-left: none;
  border-bottom: none;
}

.game-decoration.bottom-left {
  bottom: 20px;
  left: 20px;
  border-right: none;
  border-top: none;
}

.game-decoration.bottom-right {
  bottom: 20px;
  right: 20px;
  border-left: none;
  border-top: none;
}

/* 注册表单容器 */
.register-wrapper {
  background: rgba(26, 16, 60, 0.7);
  backdrop-filter: blur(15px);
  border-radius: 8px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(255, 215, 0, 0.1) inset;
  padding: 60px;
  width: 100%;
  max-width: 460px;
  position: relative;
  overflow: hidden;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: pageLoad 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
  z-index: 2;
}

@keyframes pageLoad {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.register-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(255, 215, 0, 0) 0%, 
    rgba(255, 215, 0, 1) 50%, 
    rgba(255, 215, 0, 0) 100%);
  animation: glowPulse 4s infinite ease-in-out;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.register-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5), 
              0 0 30px rgba(255, 215, 0, 0.15) inset;
}

/* 品牌标识 */
.brand-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
  animation: logoPulse 3s infinite ease-in-out;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.logo-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
  animation: glowEffect 2s infinite ease-in-out;
}

@keyframes glowEffect {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.register-header h2 {
  margin: 0;
  font-size: 32px;
  color: #FFD700;
  font-weight: 700;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.register-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(255, 215, 0, 0) 0%, 
    rgba(255, 215, 0, 0.5) 50%, 
    rgba(255, 215, 0, 0) 100%);
}

.mission-code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  font-family: 'Courier New', monospace;
}

.code-label {
  color: rgba(221, 160, 221, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.code-value {
  color: #FFD700;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 8px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 2px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.register-header p {
  color: #DDA0DD;
  margin-top: 15px;
  font-size: 16px;
  letter-spacing: 1px;
  font-style: italic;
}

.divider-small {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255, 215, 0, 0) 0%, 
    rgba(255, 215, 0, 0.5) 50%, 
    rgba(255, 215, 0, 0) 100%);
  margin: 20px auto 0;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-label {
  font-weight: 600;
  color: #DDA0DD;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-icon {
  opacity: 0.7;
}

.input-wrapper {
  position: relative;
  overflow: hidden;
}

.input-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.1) 0%, 
    rgba(255, 215, 0, 0.05) 50%, 
    rgba(255, 215, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
}

.form-input {
  padding: 14px 20px;
  background: rgba(26, 16, 60, 0.7);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  color: #DDA0DD;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
  outline: none;
  width: 100%;
}

.form-input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  background: rgba(26, 16, 60, 0.9);
  transform: translateY(-1px);
}

.form-input::placeholder {
  color: rgba(221, 160, 221, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: normal;
}

.error-message {
  color: #e53e3e;
  font-size: 12px;
  margin-top: 4px;
}

/* 密码强度指示器 */
.password-strength {
  margin-top: 10px;
}

.strength-bar {
  height: 4px;
  background: rgba(26, 16, 60, 0.5);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.strength-indicator {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 2px;
}

.strength-indicator.weak {
  background: linear-gradient(90deg, #e53e3e 0%, #c53030 100%);
}

.strength-indicator.medium {
  background: linear-gradient(90deg, #FFD700 0%, #CD853F 100%);
}

.strength-indicator.strong {
  background: linear-gradient(90deg, #9370DB 0%, #663399 100%);
}

.strength-text {
  font-size: 12px;
  margin-top: 4px;
  display: inline-block;
  color: #DDA0DD;
}

/* 条款同意 */
.terms-agreement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #DDA0DD;
  font-size: 14px;
  line-height: 1.4;
}

.checkbox-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.terms-agreement input[type="checkbox"] {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: rgba(26, 16, 60, 0.7);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(26, 16, 60, 0.7);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.terms-agreement input[type="checkbox"]:checked ~ .checkmark {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
}

.terms-agreement input[type="checkbox"]:checked ~ .checkmark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #FFD700;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.terms-link {
  color: #FFD700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.terms-link:hover {
  color: #DDA0DD;
  text-decoration: underline;
}

/* 注册按钮 */
.register-button {
  padding: 16px 20px;
  background: linear-gradient(135deg, #FFD700 0%, #CD853F 100%);
  color: #26103C;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFC107 0%, #DAA520 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
}

.register-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.register-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: gap 0.3s ease;
}

.register-button:hover .button-content {
  gap: 12px;
}

.button-arrow {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.register-button:hover .button-arrow {
  transform: translateX(2px);
}

.loading-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #DDA0DD;
}

.login-link .link {
  color: #FFD700;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.2s ease;
  position: relative;
  padding: 2px 6px;
  border-radius: 2px;
}

/* 错误反馈动画 */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.error-shake {
  animation: errorShake 0.5s ease-in-out;
}

.login-link .link:hover {
  color: #DDA0DD;
  background: rgba(255, 215, 0, 0.1);
  transform: translateX(2px);
}

/* 分隔线 */
.divider {
  display: flex;
  align-items: center;
  margin: 35px 0;
  color: rgba(221, 160, 221, 0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255, 215, 0, 0) 0%, 
    rgba(255, 215, 0, 0.3) 50%, 
    rgba(255, 215, 0, 0) 100%);
  margin: 0 15px;
}

/* 社交注册 */
.social-register {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  background: rgba(26, 16, 60, 0.7);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #DDA0DD;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.social-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 215, 0, 0) 0%, 
    rgba(255, 215, 0, 0.1) 50%, 
    rgba(255, 215, 0, 0) 100%);
  transition: left 0.6s ease;
}

.social-button:hover::before {
  left: 100%;
}

.social-button:hover {
  border-color: #FFD700;
  background: rgba(26, 16, 60, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
  color: #FFD700;
}

.social-button:active {
  transform: translateY(0);
}

.social-icon-wrapper {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-button:hover .social-icon-wrapper {
  background: rgba(255, 215, 0, 0.2);
  transform: rotate(15deg) scale(1.1);
}

/* 二维码弹窗样式 */
.qr-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.qr-code-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: scaleIn 0.3s ease;
}

.qr-code-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: #DDA0DD;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.qr-code-close:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #FFD700;
}

.qr-code-header {
  text-align: center;
  margin-bottom: 20px;
}

.qr-code-header h3 {
  color: #FFD700;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
}

.qr-code-header p {
  color: #DDA0DD;
  font-size: 14px;
  opacity: 0.8;
}

.qr-code-wrapper {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.qr-code-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  animation: rotate 15s linear infinite;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  z-index: 1;
  position: relative;
}

.qr-code-info {
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.qr-code-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.qr-code-tip {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.qr-code-footer {
  margin-top: 20px;
  text-align: center;
}

.refresh-qr-code {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.refresh-qr-code:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: #FFD700;
}

.refresh-qr-code svg {
  margin-right: 6px;
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



/* 响应式设计 */
@media (max-width: 480px) {
  .register-wrapper {
    padding: 40px 20px;
  }
  
  .register-header h2 {
    font-size: 28px;
  }
  
  .social-register {
    flex-direction: column;
  }
}
</style>